<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <style>
        table{
            width: 100%;
            height: 100%;
        }
        td{
            text-align: center;
            border: 1px solid;
        }
        th{
            border: 1px solid;
        }
    </style>
</head>

<body>
    <button onclick="render(this.innerHTML)">N350PPS</button>
    <button onclick="render(this.innerHTML)">N300PPS</button>
    <button onclick="render(this.innerHTML)">N300L</button>
    <button onclick="render(this.innerHTML)">N310</button>
    <div id="container" style="width: 100%;height:100%"></div>
    <script>
        // 创建一个<table>元素
        var table = document.createElement("table");

        // 创建表头行
        var thead = document.createElement("thead");
        var headerRow = document.createElement("tr");

        // 创建表头单元格
        var headers = ["序号", "问题等级", "问题描述",'问题原因','问题状态','长期措施','计划断点时间','实际断点时间','备注'];
        for (var i = 0; i < headers.length; i++) {
            var headerCell = document.createElement("th");
            headerCell.textContent = headers[i];
            headerRow.appendChild(headerCell);
        }
        thead.appendChild(headerRow);

        // 创建表体行和单元格
        var tbody = document.createElement("tbody");
        var data = [
            { order: "1", level: 'A', desc: "N350前轴Y向偏差1.5mm超差",reason:'工装定位销磨损',status:'3/6',longTerm:'TBD',bpTime:'TBD',realbpTime:'TBD',append:'' },
            { order: "2", level: 'C', desc: "N350前轴Y向偏差1.5mm超差",reason:'工装定位销磨损',status:'3/6',longTerm:'TBD',bpTime:'TBD',realbpTime:'TBD',append:'' },
            { order: "3", level: 'B', desc: "N350前轴Y向偏差1.5mm超差",reason:'工装定位销磨损',status:'3/6',longTerm:'TBD',bpTime:'TBD',realbpTime:'TBD',append:'' },
        ];
        for (rowData of data) {
            var row = document.createElement("tr");

            for(let key in rowData){
                let cell = document.createElement("td");
                cell.textContent = rowData[key];
                row.appendChild(cell);
            }

            tbody.appendChild(row);
        }

        // 将表头和表体添加到<table>元素中
        table.appendChild(thead);
        table.appendChild(tbody);

        // 将表格添加到页面的某个元素中
        document.getElementById("container").appendChild(table);
    </script>
</body>

</html>